
<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import pub from '../widget.pub.js'
  import scroll from '../widget.scroll.js'
  import src from '../widget.src.js'
  
  let index = 0

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'TableV2',
        tagName: 'table-v2',
        remark: `用来显示大数据的表格。请注意：使用TableV2必须有高度。`,
        extends: [pub, src],
        deprecate: 'request([fn])',
        attrs: [
          {
            name: 'alias',
            type: 'Object',
            remark: '属性别名',
            option: `
                    <div><var>value</var>: String 唯一标识对应的属性名</div>
                    <div><var>text</var> String 文本标签对应的属性名</div>
                    <div><var>children</var> String 子对象数组对应的属性名</div>
                    `,
            default: ''
          },
          {
            name: 'children',
            type: 'Array',
            remark: '子节点数据集',
            default: ''
          },
          {
            name: 'columns',
            type: 'Array',
            remark: '列属性',
            option: `
                    <div><var>align</var>: String 水平对齐 可选值: <var>left</var><var>center</var><var>right</var></div>
                    <div><var>field</var>: String 数据对应的属性名</div>
                    <div><var>text</var> String 文本标签对应的属性名</div>
                    <div><var>width</var> Number 列宽</div>
                    <div><var>type</var> String 展示类型 可选值: <var>leaf</var></div>
                    `,
            default: ''
          },
          {
            name: 'item-height',
            type: 'Number',
            remark: '行高',
            default: '40'
          },
          {
            name: 'loading',
            type: 'Boolean',
            remark: '是否显示loading效果',
            default: ''
          },
        ],
        methods: [
          {
            name: 'focus(id)',
            remark: '聚焦到指定的id',
            option: '<var>id</var>: String',
            return: '',
          },
          {
            name: 'find(id)',
            remark: '根据id查找',
            option: '<var>id</var>: String',
            return: '',
          },
          {
            name: 'merge(data)',
            remark: '合并数据',
            option: '<var>data</var>: Array',
            return: '',
          }
        ],
        slots: [{
          name: '[field]',
          remark: '对应columns的field字段',
          props: '{item}'
        }],
        examples: [{
          remark: '树形表格，最后一列显示HTML内容',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-table-v2 height="260" :current="tableV2Current" @click:item="clickTableV2Item" :alias="{value: 'id'}" :columns="tableV2Columns" :children="tableV2List">
                <template #oper="{item}">
                  <span style="color:red" class="f-line-1">{{item.address}}</span>
                </template>
              </w-table-v2>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    tableV2Current: '',
                    tableV2Columns: [
                      {text: 'ID',   field: 'id', width: 200, type: 'leaf'},
                      {text: '标题', field: 'name', width: '*'},
                      {text: '操作', field: 'oper', align: 'center', width: 180},
                    ],
                    tableV2List: [
                      {id: '001', name: '大黄蜂', address: '赛博坦星a', children: [
                        {id: '001-001', name: '霸天虎', address: '史前地球'}
                      ]},
                      {id: '002', name: '威震天', address: '赛博坦星b'},
                      {id: '003', name: '擎天柱', address: '赛博坦星c'},
                    ],
                  }
                },
                methods: {
                  clickTableV2Item(item) {
                    this.tableV2Current = item.id
                  }
                }
              }
            </${'script'}>
            `,
					comp: {
						data() {
						  return {
                tableV2Current: '',
                tableV2Columns: [
                  {text: 'ID',   field: 'id', width: 200, type: 'leaf'},
                  {text: '标题', field: 'name', width: '*'},
                  {text: '操作', field: 'oper', align: 'center', width: 180},
                ],
                tableV2List: [
                  {id: '001', name: '大黄蜂', address: '赛博坦星a', children: [
                    {id: '001-001', name: '霸天虎', address: '史前地球'}
                  ]},
                  {id: '002', name: '威震天', address: '赛博坦星b'},
                  {id: '003', name: '擎天柱', address: '赛博坦星c'},
                ],
						  }
						},
						methods: {
              clickTableV2Item(e, item) {
                this.tableV2Current = item.id
              }
						}
					}
        }]
      }
    }

  }
</script>

<style>
</style>
